<template>
	<div>
		<div class="h2">外来人员场馆预约列表</div>
		<div id="components-form-demo-advanced-search">
			<a-form class="ant-advanced-search-form home-form" :form="form" @submit="handleSearch">
				<a-row :gutter="24">
					<a-col :span="8">
						<a-form-item label="名称">
							<a-input class="field-right" placeholder="请输入名称搜索" v-decorator="[`key`]" />
						</a-form-item>
					</a-col>
					<!-- <a-col :span="8">
						<a-form-item label="状态">
							<a-select :allowClear="true" v-decorator="['state']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in ActivityStateList" :key="index"
									:value="item.Key">{{ item.Value }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>-->
					<a-col :span="8">
						<a-form-item label="场馆">
							<a-select :allowClear="true" v-decorator="['venueID']" placeholder="全部"
								optionFilterProp="children" showSearch>
								<a-select-option v-for="(item, index) in venueData" :key="index" :value="item.ID">
									{{ item.Name }}</a-select-option>
							</a-select>
						</a-form-item>
					</a-col>
					<a-col :span="8">
						<a-form-item label="预约时间">
							<a-range-picker format="YYYY-MM-DD " v-decorator="[`data`]" />
						</a-form-item>
					</a-col>
				
				</a-row>
			</a-form>
		</div>
		<a-button-group size="default" class="option">
			<a-button type="primary" html-type="submit" class="btn1">搜索</a-button>
			<a-button @click="handleReset" class="btn2">重置</a-button>
			<a-button type="primary" @click="exportList">导出</a-button>
		</a-button-group>
		<div>
			<!-- AddTime: "2022-07-11 19:44"
			EstimateEndTime: "2022-08-01 19:41"
			ID: "6f6a8bbf177e46019f676605b6561e53"
			Name: "李坤"
			Phone: "15665366356"
			StartTime: "2022-07-11 19:44"
			TimeTable: "14:00-16:00"
			TimeTableID: "80b21b0785ee43ec8546d02d7205c6ef"
			VenueID: "46e52dc680144498b29a889f52c4b8a1"
			VenueName: "乒乓球教室2（田径场北侧看台下）" -->
			<el-table :data="data" v-loading="loading" border :max-height="tableHeight" highlight-current-row
				style="width: 100%;">
				<el-table-column prop="VenueName" label="名称" min-width="200" fixed="left"></el-table-column>
				<!-- <el-table-column label="预约日期" min-width="120">
					<template slot-scope="scope">
						{{ scope.row.EstimateEndTime?scope.row.EstimateEndTime.substring(0,10):''}}
					</template>
				</el-table-column> -->
				<el-table-column prop="TimeTable" label="预约时间" min-width="100">
					<template slot-scope="scope">
						{{ scope.row.EstimateEndTime?scope.row.EstimateEndTime.substring(0,10):''}}   {{ scope.row.TimeTable}}
					</template>
				</el-table-column>
				<el-table-column label="预约人" min-width="120">
					<template slot-scope="scope">
						{{ scope.row.Name}}
					</template>
				</el-table-column>
				<el-table-column label="预约人手机" min-width="120">
					<template slot-scope="scope">
						{{ scope.row.Phone}}
					</template>
				</el-table-column>
				<!-- <el-table-column label="预约时间" min-width="160">
					<template slot-scope="scope">
						{{ scope.row.Date }} -- {{ scope.row.TimeTable }}
					</template>
				</el-table-column>
				<el-table-column label="状态" min-width="160">
					<template slot-scope="scope">
						<a-tag color="green">
							{{ scope.row.State=='1'?'已预约':scope.row.State=='2'?'取消预约':scope.row.State=='3'?'退订':""}}
						</a-tag>
					</template>
				</el-table-column> -->

				<el-table-column label="操作" width="140" fixed="right">
					<template slot-scope="scope">
						<!-- <i title="修改" class="iconfont icon-editor1" style="color: #1890FF;" @click="modifyList(scope.row, 'modify')"></i> -->
						<i title="删除" class="iconfont icon-delete" style="color: red;"
							@click="deleteList(scope.row)"></i>
						<!-- <i title="取消" class="iconfont icon-B" style="color: #1890FF;" @click="quxiao(scope.row)"></i> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="pagination.currentPage" :page-sizes="pagination.pageSizeOptions"
				:page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="pagination.total"></el-pagination>
		</div>
		<!-- 	<venue class="venue" @closevenue="closevenue" v-if="venueIf"></venue> -->
	</div>
</template>

<script>
	import Cache from '@/utils/cache';
	import Func from '@/utils/func';
	import moment from 'moment'
	import {
		ManageVenueExternalReserveDoGetPageList,
		CommonDoGetVenueList,
		ManageVenueExternalReserveDoDelete,
		DoUpdateVenueReserve,
		ManageVenueReserveDoCancel,
		ManageClubExportExportExcel
	} from '@/api/follow';
	// import venue from '@/components/venue.vue';
	const data = [];
	export default {
		components: {
			// venue
		},
		data() {
			return {
				venueData: [],
				data,
				form: this.$form.createForm(this, {
					name: 'advanced_search'
				}),
				pagination: {
					currentPage: 1,
					pageSize: this.global.pageSize,
					pageSizeOptions: this.global.pageSizeOptions, // 每页中显示的数据
					showTotal: total => `共有 ${total} 条数据` // 分页中显示总的数据
				},
				addIf: false,
				text: {},
				loading: false,
				values: {},
				ActivityStateList: [{
						Key: 1,
						Value: "已预约",
					},
					{
						Key: 2,
						Value: "取消预约",
					},
					{
						Key: 3,
						Value: "退订",
					}
				],
				ActivityStateListType: [{
						Key: 1,
						Value: "活动预约",
					},
					{
						Key: 2,
						Value: "学生预约",
					}
				],
				pages: {
					pageIndex: 1,
					pageSize: 20
				},
				tableHeight: parseFloat(window.innerHeight - 160),
				venueIf: false,
				requestUrl: this.global.requestUrl,
				token: Cache.get('token'),
			};
		},
		computed: {},
		created() {
			this.getList();
			this.getListOther();
			// this.$confirm({
			// 	title: '提示',
			// 	content: `当前数据量较大，请先选择日期进行查找`,
			// 	okText: '确认',
			// 	cancelText: '取消',
			// 	async onOk() {

			// 	}
			// });
		},
		mounted() {},
		methods: {
			async getListOther() {
				this.loading = true;
				let res = await CommonDoGetVenueList(data);
				this.venueData = res.data.data;
			},

			async exportList() {
				console.log('111');
				this.form.validateFields((error, values) => {
					console.log(values);
					let data = {};
					data = values;
					console.log(data)
					data.headTicket = Cache.get('token')
					if (data.data && data.data.length > 0) {
						data.startTime = data.data[0].format('YYYY-MM-DD')
						data.endTime = data.data[1].format('YYYY-MM-DD')
					}
					data.data = [];
					// data.
					// let res=ManageClubExportExportExcel(data);
					//console.log(res)
					let hrefUrl = this.requestUrl + 'Manage/VenueExternalReserve/ExportExcel?headTicket=' +
						encodeURIComponent(this.token);
					let hrefStr = '';
					for (let key in data) {
						if (data[key]) {
							hrefStr += key + '=' + data[key] + '&';
						}
					}
					//console.log(hrefUrl + '&' + hrefStr)
					window.open(hrefUrl + '&' + hrefStr, '_blank');
				});
			},
			handleSearch(e) {
				e.preventDefault();
				this.form.validateFields(async (error, values) => {
					this.pagination.currentPage = 1;
					if (values.data && values.data.length > 0) {
						values.startTime = values.data[0].format('YYYY-MM-DD')
						values.endTime = values.data[1].format('YYYY-MM-DD')
					}
					this.values = values;
					this.getList();
				});
			},
			handleReset() {
				this.form.resetFields();
				this.values = {};
				this.getList();
			},
			handleSizeChange(val) {
				this.pagination.pageSize = val;
				this.getList();
			},
			handleCurrentChange(val) {
				this.pagination.currentPage = val;
				this.getList();
			},
			async getList() {
				this.loading = true;
				let data = {};
				if (this.values) {
					data = this.values;
				}
				data.pageIndex = this.pagination.currentPage;
				data.pageSize = this.pagination.pageSize;
				let res = await ManageVenueExternalReserveDoGetPageList(data);
				this.loading = false;
				this.data = res.data.data;
				const pagination = {
					...this.pagination
				};
				pagination.total = res.data.pageInfo.TotalItemCount;
				this.pagination = pagination;
			},
			modifyList(text) {
				this.text = {
					...text,
					time: new Date()
				}
				this.venueIf = !this.venueIf;
			},
			quxiao(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定取消该预约吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.id = text.ID
						let res = await ManageVenueReserveDoCancel(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				});
			},
			deleteList(text) {
				let that = this
				this.$confirm({
					title: '提示',
					content: `您确定删除吗？`,
					okText: '确认',
					cancelText: '取消',
					async onOk() {
						let data = {}
						data.id = text.ID
						let res = await ManageVenueExternalReserveDoDelete(data);
						if (res.data.code == 0) {
							that.getList()
							that.$message.success(res.data.msg)
						} else {
							that.$message.error(res.data.msg)
						}
					}
				});
			},
			seeList(text, name) {
				let path = ''
				if (name == 'teacher') {
					path = 'ClubTeacher'
				} else if (name == 'manage') {
					path = 'ClubManagerList'
				} else {
					path = 'ClubMember'
				}
				this.$router.push({
					name: path,
					query: {
						ID: text.ID
					}
				});
			},
			async closevenue(data) {
				if (data.length > 1) {
					this.$message.error('仅可选择一个场地和使用时间段！')
					return false
				}
				for (let i = 0; i < data.length; i++) {
					let params = {}
					params.ID = this.text.ID
					params.TimeTableID = data[i].TimeTableID
					params.Date = data[i].Date
					let res = await DoUpdateVenueReserve(params)
					if (res.data.code == 0) {
						this.$message.success(res.data.msg)
					} else {
						this.$message.error(res.data.msg)
					}
				}
				this.venueIf = false
				this.getList()
			}
		}
	};
</script>

<style lang="less" scoped>
	/deep/.ant-form-item {
		display: flex;
		margin-bottom: 10px !important;

		/deep/.ant-form-item-label {
			width: 80px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			text-align: right;
		}

		/deep/.ant-form-item-control-wrapper {
			flex: 1;

			/deep/.ant-calendar-picker {
				width: 100%
			}
		}
	}

	/deep/.ant-table-thead>tr>th,
	/deep/.ant-table-tbody>tr>td {
		padding: 5px;
	}

	/deep/.ant-table-pagination.ant-pagination {
		float: left;
		// display:none;
	}

	/deep/.ant-table-body tr th:first-child {
		display: none;
	}

	/deep/.ant-table-body tr td:first-child {
		display: none;
	}

	/deep/.el-table th.is-leaf {
		background: #fafafa;
	}

	/deep/.el-table td,
	/deep/.el-table th {
		padding: 5px;
	}

	/deep/.ant-table-tbody .ant-table-row-cell-break-word:nth-child(2) {
		position: relative;

		.con {
			position: absolute;
			top: 40px;
			left: 0px;
			z-index: 999;
			background: #fff;
			width: 96%;
			padding: 1% 2%;
		}
	}

	.option {
		margin-top: 10px;
		margin-bottom: 20px;
		overflow: hidden;
	}

	.option .btn {
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		float: left;
		background: #1890ff;
		color: #fff;
		margin-right: 10px;
		border-radius: 3px;
		cursor: pointer;
		border: none;
	}

	.foot {
		text-align: center;
		margin-top: 100px;
	}

	.el-pagination {
		margin-top: 10px;
	}
</style>
